---
sidebar_position: 3
---

import ImagePreview from "@site/src/components/ImagePreview";

# 画布

画布为大屏设计得展示区，所有被拖拽至画布中的组件都会展示到最后的大屏当中。  

<ImagePreview alt="画布" src="/img/docs/设计器/画布/painter-intro.jpg" />

## 相关操作  

### 辅助线 {#guide}  

  帮助用户在设计大屏的整体布局结构时非常有帮助，通过标记每一个*区块*的**位置**、**尺寸**，可以更好的完成大屏设计之初的架构，让最后成型的大屏更加美观。  

  <ImagePreview alt="辅助线" src="/img/docs/设计器/画布/guide-line.png" />

  **点击**标尺即可在点击位置生成标尺。  

  通过左上角按钮可以控制辅助线的**显示隐藏**以及统一**删除**的功能。  

  <ImagePreview alt="辅助线工具" src="/img/docs/设计器/画布/guide-line-tool.png" />

  同样可以将辅助线*拖拽至标尺处*、或*鼠标双击*进行**删除**。  

### 多选 

  同时**选中多个**组件，同时控制他们的**位置**和**尺寸**  

  可以通过按下鼠标坐标并*拖动*画布选区或者按住键盘`shift`键同时点击组件完成多选。  

  <ImagePreview alt="多选" src="/img/docs/设计器/画布/drag-select.png" />

### 菜单 {#dropdown}  

#### 上一下一  

  将组件在列表中的顺序前进或后退一个位置。  

  列表的顺序决定了组件在画布当中的显示顺序，*前面*的组件会被*后面*的组件所**覆盖**。  

#### 置顶置底  

  与上面功能类似，**置顶**将组件放置在最后面，**置底**将组件放置在最前面。  

  不同的是，*置顶置底*将把组件的层级改变，层级高的组件会覆盖在层级低的组件。  

#### 删除  

  **删除**组件

#### 拷贝粘贴  

  **拷贝**组件后可点击**粘贴**将新生成选中的组件。   

#### 复制（2022-07-08）  

  **复制**为上述**拷贝**和**粘贴**的合并操作。  

#### 成组|取消成组  

  将组件**成组**后，选中的组件则由**组**进行控制。  
  **组**内的组件的*大小*、*位置*不再关联画布，修改**组**的大小和位置，**组**内组件会跟随变化。  

:::tip 提示

**组**修改大小时，内部*组件*的变化表现为**缩放**，而不是真正的大小修改。

:::

#### 切换组件  

  根据**数据格式**将*选中组件*切换为*其他组件*。  
  两个组件的*数据格式* **相同**时，可进行切换。  

  组件的**数据**、**基础配置**会移植到新的组件中，而*交互*和*组件配置*则表现为新组件的**默认配置**。  

  <ImagePreview alt="切换组件" src="/img/docs/设计器/画布/change-component.png" />

#### 复制组件样式  

  复制*组件*的**基础配置**和**组件配置**，并生成新的组件。  
  **数据**和**交互**则为组件的**默认配置**。  

#### 显示隐藏   

  控制组件在画布中**显示**或**隐藏**。    

#### 锁定  

  固定组件的**配置**。  

  组件在画布中不会存在任何的交互动作，无法*拖动*和修改*大小*。   

:::note 例子

固定组件的配置，可以防止在制作大屏时，对已完成的部分做出误操作。  

:::

#### 恢复默认配置

  将组件的所有配置恢复成组件最初的配置。  

### 键盘操作（2022-07-08）  

在画布处于聚焦的状态下，可以通过*键盘*完成相关操作。  

1. 前进后退  
`ctrl+z` 后退  
`ctrl+y` 前进  
2. 移动    
`shift+arrow` 上下左右移动  
3. 拷贝粘贴  
`ctrl+c` 拷贝  
`ctrl+v` 粘贴  
4. 删除  
`delete` 删除  
    